<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现
-->

<!-- 
1. 模板页面: html + js 
2. js以什么形式(语法)存在？
    2.1 指令语法: 是vue自定义标签属性(以v-开头)  例子: v-model  属性值是一个JS的表达式 v-model="msg"
    2.2 插值语法: 双大括号表达式{{表达式}}，作用是动态显示数据, 只能写在文本标签体中，例子: {{msg}}
    2.3 指令和插值语法中的表达式，自动从data中动态取数据
3. 双向数据绑定, 2个重要特点:
    数据绑定：只要改变data中的数据值, 界面就【自动】更新。数据的流向：从 data ==流向==> 模板页面template。当我们说数据绑定的时候，指定是（单向）数据绑定。
    双向数据绑定：即数据可以在data和页面之间相互流通，有2个流向：模板页面 <==> data。另一个流向：改变页面输入数据, data中的数据也可以【自动】改变：模板页面 ==> data
-->

<!-- 模板页面区域，由 HTML结构+JS代码 组成 -->
<div id="test">
  <input type="text"  v-model="msg">  <!-- msg 是JS表达式，一个表达式会有一个结果。提到JS表达式就知道是个动态的值。 -->
  <p>Hello {{msg}}</p>  <!-- msg 是JS表达式 -->
</div>

<!-- 这行代码是模板页面之外的区域 -->
<p>Hello {{msg}}11111</p> <!-- 在要被解析的区域之外，该标签中的{{msg}}不会被解析 -->

<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> -->
<script src="../js/vue.js"></script>
<script>
  /* 创建Vue的实例 */
  const vm = new Vue({ // 何为配置对象？ 配置对象就是配置一些选项，属性名是一些特定的名称（有哪些属性名可以写？参考vue的API文档之‘选项’），每个属性就是一个选项。何为选项？即，这个属性可写可不写。
    el: '#test', // 用于指定模板的根元素,本案例的根元素是div。属性值是选择器字符串， 属性名el(element)，固定写法。
    data: { // data是包含用于显示的多个可变数据的对象(相当于react中的state), 为模板页面提供数据，里面不会包含方法，因为方法不能显示出来。
      msg: 'atguigu'
    }
  })

  setTimeout(() => {
    vm.msg = 'baidu' // 数据代理
  }, 2000);


</script>

</body>
</html>